目錄

前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕～

前端小試身手(2)--it幫跳轉到最佳解答

前端小試身手(3)--增添系列文目錄

前端小試身手(4)--it幫發文「一眼全覽」

前端小試身手(5)-備份it幫的發問！

前端小試身手(6)--IMG複製大師，懶人專用小腳本

前端小試身手(7)--迷片靜音神隊友，讓你尷尬不再有！

前端小試身手(8)--教你寫出「思想審查警衛」，過濾垃圾雜訊的利器！

前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

前情提要

有時候我們需要使用一些圖片，勢必需要圖片的網址，這時候，
也許你可以本機上傳，然後去把網址抓好，
又或者你可以找到網路上別人的圖片，右鍵開啟新分頁，再複製網址；
又或者直接打開檢查(F12)找到src的網址去複製。

光聽這個流程我就覺得，心累。
這時候前端大師，就會寫一套簡單的小腳本來完成這個白爛的工作。

腳本下載

https://greasyfork.org/zh-TW/scripts/477141-img%E8%A4%87%E8%A3%BD%E5%A4%A7%E5%B8%AB

JS程式碼

// ==UserScript==
// @name         IMG複製大師
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  針對網頁上圖片，點擊就複製其網址
// @author       You
// @match         *://*/*
// @icon         https://www.highcharts.com/demo/highcharts/spline-plot-bands
// @grant        none
// ==/UserScript==
let isEventActive = false; // 用於跟蹤事件的狀態

// 創建一個鏈接元素並設置其屬性
const toastrCssLink = document.createElement('link');
toastrCssLink.rel = 'stylesheet';
toastrCssLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css';

// 創建一個腳本元素並設置其屬性
const toastrScript = document.createElement('script');
toastrScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js';

// 創建另一個腳本元素並設置其屬性
const toastrScript2 = document.createElement('script');
toastrScript2.src = 'https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js';

// 將鏈接元素和腳本元素添加到文檔頭部
document.head.appendChild(toastrCssLink);
document.head.appendChild(toastrScript);
document.head.appendChild(toastrScript2);
// 獲取頁面上的所有img元素
const images = document.querySelectorAll('img');

function removeClickHandler(image) {
    image.removeEventListener('click', clickHandler);
}

function toggleEvent() {
    if (isEventActive) {
        // 如果事件已經激活，則關閉事件
        console.log('IMG複製大師關閉ꐦ°᷄д°᷅');
        // 解除事件監聽
        images.forEach(removeClickHandler);
        isEventActive = false;
    } else {
        // 如果事件尚未激活，則打開事件
        console.log('IMG複製大師啟動ฅ^•ﻌ•^ฅ');
        // 遍歷所有img元素
        images.forEach((image) => {
            // 檢查圖像是否已加載
            if (image.complete) {
                // 圖像已加載，直接添加點擊事件處理程序
                addClickHandler(image);
            } else {
                // 圖像尚未加載，等待加載完成後再添加點擊事件處理程序
                image.addEventListener('load', () => {
                    addClickHandler(image);
                });
            }
        });
        isEventActive = true;
    }
}

document.addEventListener('keydown', (event) => {
    if ((event.key === 'q' && event.ctrlKey) || event.key === 'F8') {
        toggleEvent(); // 切換事件的狀態
    }
});

function transformImageUrl(url) {
    // 使用正則表達式匹配URL中的目標部分
    const regex = /https:\/\/cache.ptt.cc\/c\/https\/i.imgur.com\/([^?]+)/;
    const match = url.match(regex);

    if (match) {
        // 如果匹配成功，構建新的URL
        const imgurId = match[1];
        return `https://i.imgur.com/${imgurId}`;
    } else {
        // 如果沒有匹配到目標部分，返回原始URL
        return url;
    }
}

// 創建一個函數，用於添加點擊事件處理程序並處理圖像的src
function addClickHandler(image) {
    image.addEventListener('click', clickHandler);
}

// 創建一個函數，用於處理點擊事件
function clickHandler() {
    let src = this.src;
    src = transformImageUrl(src);
    const textArea = document.createElement('textarea');
    textArea.value = src;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);

    // 使用 toastr 進行通知
    toastr.success('網址複製完成: ' + src);
}

觀念筆記

這個小腳本總共使用了大概三種觀念，
第一種就是toast的套件使用，
第二個是監聽鍵盤做開關，
第三個則是程式本身對於img的監聽，把src複製到剪貼簿。

第一部分:套件

使用套件在於腳本，必須利用appendChild，先使用create的API製作出放置CDN的link元素，
再把它append到網頁上，則可以使用其套件。

第二部分:監聽鍵盤

這腳本啟動與關閉是透過監聽鍵盤的，ctrl+q或F8這部分就是純粹監聽。

document.addEventListener('keydown', (event) => {
    if ((event.key === 'q' && event.ctrlKey) || event.key === 'F8') {
        toggleEvent(); // 切換事件的狀態
    }
});

裡面寫了一個toggleEvent是因為想要設定可以開開關關。

第三部分:程式本身

這邊有一點小技巧是複製到剪貼簿，其實以前文章也有寫過教學，是個常見實用的招數：

    const textArea = document.createElement('textarea');
    textArea.value = src;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');

再來就是針對網頁上全部的img元素，去監聽點擊事件、移除事件這兩個。

const images = document.querySelectorAll('img');

function addClickHandler(image) {
    image.addEventListener('click', clickHandler);
}

function removeClickHandler(image) {
    image.removeEventListener('click', clickHandler);
}

之後這兩個事件要寫在toggle裡面，當開啟的條件就執行新增事件；關閉就執行解除綁定

開啟也就是：

  images.forEach((image) => {
            // 檢查圖像是否已加載
            if (image.complete) {
                // 圖像已加載，直接添加點擊事件處理程序
                addClickHandler(image);
            } else {
                // 圖像尚未加載，等待加載完成後再添加點擊事件處理程序
                image.addEventListener('load', () => {
                    addClickHandler(image);
                });

關閉則是：
images.forEach(removeClickHandler);

心得

這次的小腳本功能非常簡單，寫起來邏輯也是很清晰透明，沒有什麼彎曲。
雖然簡單，但是寫起來功能非常實用！
這就是針對懶人專用的！
其實沒有人規定前端這種東西要寫得多大，多了不起/ᐠ｡ꞈ｡ᐟ
好像你很屌、很懂前端、框架，那個是一回事，能夠完成自己的需求也很美好。

很久沒更新了，這次的酷酷小腳本應該很爽⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾
好好的來玩前端吧，未來還有更大的宇宙！